<template>
	<view class="container">
		<view v-if="loading">
			<div  style="width: 50%;" class="skeleton-row"></div>
			<div  style="width: 80%;" class="skeleton-row1"></div>
			<div  style="width: 70%" class="skeleton-row1"></div>
			<div  style="width: 80%;" class="skeleton-row1"></div>
			<div  style="width: 70%;" class="skeleton-row1"></div>
		</view>
		<view class="container"  v-if="!loading">
			<!-- 基本信息 -->
			<view class="foundation">基本信息</view>
			<view class="content">
				<view style="width: 693rpx;">
					<u-form labelWidth="300rpx" labelPosition="left" style="width: 688rpx;"
						:label-style="{ 'font-size': '24rpx' }" :model="model" :rules="rules" ref="uForm">
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="货品名称" prop="name" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input disabled placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="text" placeholder="请输入货品名称"
									v-model="model.productName" />
							</view>
						</u-form-item>
			
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="请输入批次号" prop="batchNumber"
							borderBottom ref="item1">
							<view class="in-block-ent">
								<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
									type="number" placeholder="请输入批次号" v-model="model.batchNumber" />
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="原数量" prop="name3" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input disabled placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入实际入库数量"
									v-model="model.count" />
								<view style="margin-left: 20rpx;font-size: 24rpx;width: 150rpx;">
									单位：{{model.productUnitName}}</view>
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="已入库数量" prop="name3" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input disabled placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入实际入库数量"
									v-model="model.inCount" />
								<view style="margin-left: 20rpx;font-size: 24rpx;width: 150rpx;">
									单位：{{model.productUnitName}}</view>
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="最高预警数(选填)" borderBottom>
							<view class="in-block-ent">
								<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
									type="number" placeholder="请输入最高预警数量" v-model="model.highWarning" />
								<view style="margin-left: 20rpx;font-size: 24rpx;width: 150rpx;">
									单位：{{model.productUnitName}}</view>
							</view>
						</u-form-item>
						<!-- 规格，毛重，皮重，净重，件数 -->
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="最低预警数(选填)" borderBottom>
							<view class="in-block-ent">
								<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
									type="number" placeholder="请输入最低预警数量" v-model="model.lowWarning" />
								<view style="margin-left: 20rpx;font-size: 24rpx;width: 150rpx;">
									单位：{{model.productUnitName}}</view>
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="规格" prop="specification" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
									type="text" disabled placeholder="--" v-model="model.productSpecificationName" />
							</view>
							
						</u-form-item>
						
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="件数" prop="piece" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input @input="handleGtn" placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入件数"
									v-model="model.piece" />
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="毛重" prop="grossWeight" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input @input="handleGtn" placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入毛重"
									v-model="model.grossWeight" />
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="皮重" prop="tareWeight" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input @input="handleGtn" placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入皮重"
									v-model="model.tareWeight" />
							</view>
						</u-form-item>
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="净重" prop="netWeight" borderBottom
							ref="item1">
							<view class="in-block-ent">
								<input @input="handleGtn" placeholder-style="font-size: 24rpx;"
									style="font-size: 24rpx;text-align: right;" type="number" placeholder="请输入净重"
									v-model="model.netWeight" />
							</view>
						</u-form-item>
						<!-- <u-form-item style="height: 100rpx;line-height: 50rpx;" label="件数" prop="quantity" borderBottom
							ref="item1">
							<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
								type="text" placeholder="请输入件数" v-model="model.quantity" />
						</u-form-item> -->
						<u-form-item style="height: 100rpx;line-height: 50rpx;" label="生产日期" prop="producedDate" borderBottom
							ref="item1" @click="handeleDate">
							<view class="in-block-ent">
								<input placeholder-style="font-size: 24rpx;" style="font-size: 24rpx;text-align: right;"
									disabled type="text" placeholder="请输入生产日期" v-model="model.producedDate" />
							</view>
						</u-form-item>
						<u-form-item labelPosition="top" label="货物分配" ref="item1">
							<view style="margin-top: 25rpx;">
								<view class="storageLocations" v-for="(item,index) in warehouseList" :key="index">
									<view class="nums" @click="handelePosition(index)">
										<view v-if="item.warehouseName">{{item.warehouseName}}</view>
										<view v-else style="color: #7c7c7c;font-size: 24rpx;">请选择货位</view>
									</view>
									<view class="num">
										<view style="width: 180rpx;">
											<input :style="{fontSize: '24rpx' }" placeholder-style="font-size: 24rpx;"
												type="number" placeholder="存放数量" v-model="item.count" />
										</view>
										<view class="kg">
											<view>单位</view>
											<view>{{model.productUnitName}}</view>
										</view>
									</view>
									<view class="delete" v-if="warehouseList.length>1" @click="handeleDetail(index)">
										<image style="width: 30rpx;height: 30rpx;" src="/static/work/reduct.png" mode="">
										</image>
									</view>
								</view>
							</view>
						</u-form-item>
						<u-form-item>
							<view class="adds" @click="handeleAdd">
								<view>新增货位</view>
							</view>
						</u-form-item>
						
						<view class="submit">
							<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">确认</u-button>
						</view>
					</u-form>
					
				</view>
			
			</view>
			
			
		</view>
		

		<u-datetime-picker @cancel="dateShow=false" @confirm="handeleDateConfirm" :show="dateShow" v-model="validity"
			mode="date"></u-datetime-picker>
		<u-popup :show="showS" round="20rpx" mode="bottom" >
			<view class="p1A">
				<view class="hwqr-1">仓库货位确认</view>
				<view class="hwqr-2">
					<view class="p1A-1">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theLeft" :key="index"
								:class="index==leftIndex?'yp-left':'yp-left-active'" @click="handleLeft(item,index)">
								{{item.name}}</view>
						</scroll-view>
					</view>
					<view class="p1A-2">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theRight" :key="index"
								:class="index==rightIndex?'yp-right':'yp-right-active'"
								@click="handleRight(item,index)">{{item.name}}</view>
						</scroll-view>
					</view>
				</view>
				<view class="hwqr-3">
					<view class="hwqr-4" @click="handleWarehouse">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue";
	import {
		getWarehouse,
		createPurchase
	} from '@/api/store.js'
	import {
		constructGroups
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				scrollTop:0,
				rightIndex: 0,
				leftIndex: 0,
				showS: false,
				loading: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				model: {
					productName: '',
					batchNumber: '',
					count: '',
					highWarning: '',
					lowWarning: '',
					validity: Number(new Date()),
					producedDate: Number(new Date()),
					isStorage: '', //货位
					isQuantity: '', //数量
				},
				rules: {
					productName: [{
						required: true,
						message: '请输入货品名称',
						trigger: ['change']
					}],
					batchNumber: [{
						required: true,
						message: '请输入批次号',
						trigger: ['change']
					}],
					count: [{
						required: true,
						message: '请输入实际入库数量',
						trigger: ['change']
					}],
					producedDate:[
						{
							required: true,
							message: '请输入生产日期',
							trigger: ['change']
						}
					],
					piece:[
						{
							required: true,
							message: '请输入件数',
							trigger: ['change']
						}
					],
					validity: [{
						required: true,
						message: '请输入生产日期',
						trigger: ['change']
					}]
				},
				show: false, //货位 bool
				dateShow: false, //日期 bool
				columns: [],
				warehouseList: [ //货位
					{
						warehouseId: '',
						warehouseName: '',
						count: ''
					}
				],
				libraryShow: false, //控制选择仓库弹窗
				columnslibrary: [], //仓库一级数据
				columnData: [], //仓库二级数据
				subscript: 0,
				moneys: [], //初始货位信息
				index: 0,
				validity: Number(new Date()),
				theLeft: [],
				theRight: [],
				isGtn: false, //毛重+皮重不能大于净重
			}
		},

		onLoad(option) {
			this.loading = true
			this.index = option.index
			this.model = JSON.parse(option.item) //商品信息
			//如果批次号字段为空使用当前生成的年月日时分
			this.model.batchNumber = this.model.batchNumber ? this.model.batchNumber : this.setCurrentDateTime()
			// 把数据返回的时间戳赋值给timeStamp变量做数据回显
			// this.model.timeStamp = this.model.validity?this.formatTimestamp(this.model.validity):this.model.validity
			this.model.warehouseList && (this.warehouseList = this.model.warehouseList)
			setTimeout(()=>{
				this.loading = false
			},2000)

		},
		onShow() {
			// 获取库位信息
			this.getWarehouses()
		},
		methods: {
			// 获取仓库货位列表
			async getWarehouses() {
				let response = await getWarehouse()
				this.moneys = response.data.list
				this.theLeft = response.data.list.filter(item => item.parentId == null)
				this.theRight = response.data.list.filter(item => item.parentId == this.theLeft[0].id)
				this.loading = false
				const arr = response.data.list.map(item => {
					return {
						id: item.parentId ? null : item.id,
						name: item.name,
						parentId: item.parentId,
					}
				})
				// let objs = constructGroups(arr)
				// this.columnslibrary = objs.columns
				// this.columnData = objs.columnData
			},
			handleWarehouse() {
				this.showS = false
			},
			handleRight(items, index) {
				this.model.isStorage = items.id, //货位
					// isQuantity:'',//数量
					this.warehouseList[this.subscript].warehouseName = items.name
				this.warehouseList[this.subscript].warehouseId = items.id
				this.rightIndex = index
			},
			// 点击仓库筛选出来货位
			handleLeft(items, index) {
				this.leftIndex = index
				this.rightIndex = 0
				this.theRight = this.moneys.filter(item => item.parentId == items.id)
				this.warehouseList[this.subscript].warehouseName = this.theRight[0].name
				this.warehouseList[this.subscript].warehouseId = this.theRight[0].id
				this.model.isStorage = this.theRight[0].id //货位
			},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.isGtn) {
						uni.showToast({
							title: '皮重加净重 不能大于毛重',
							icon: 'none'
						})
						return
					}
					let bol = false
					for (const item of this.warehouseList) {
						if (!item.warehouseName) {
							uni.showToast({
								title: '请选择货位',
								icon: 'none'
							})
							bol = true
							break; // 找到目标，终止循环
						}
						if (!item.count) {
							uni.showToast({
								title: '请填写数量',
								icon: 'none'
							})
							bol = true
							break; // 找到目标，终止循环
						}
					}
					if (bol) return
					// this.loading = true
					// const currentTotal = this.warehouseList.reduce((sum, item) => sum + (parseInt(item.count, 10)), 0);
					// if(currentTotal<this.model.count){
					// 	uni.showToast({
					// 		title: '还有商品数量待分配',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					this.model.warehouseList = this.warehouseList
					let data = {
						items: this.model,
						index: this.index
					}
					uni.$emit('store', {
						data: data
					});
					uni.navigateBack()

				}).catch(errors => {
					// console.log('失败');
				})
			},

			//  皮 tareWeight 净  netWeight 毛 grossWeight 皮重+净重<= 毛重
			handleGtn() {
				if (this.model.grossWeight && this.model.tareWeight && this.model.netWeight) {
					if ((parseFloat(this.model.tareWeight) + parseFloat(this.model.netWeight)) > parseFloat(this.model
							.grossWeight)) {
						this.isGtn = true
						uni.showToast({
							title: '皮重加净重 不能大于毛重',
							icon: 'none'
						})
					}
				} else if (this.model.tareWeight && this.model.grossWeight) {
					if (parseFloat(this.model.tareWeight) > parseFloat(this.model.grossWeight)) {
						this.isGtn = true
						uni.showToast({
							title: '皮重不能大于毛重',
							icon: 'none'
						})
					}
				} else if (this.model.netWeight && this.model.grossWeight) {
					if (parseFloat(this.model.netWeight) > parseFloat(this.model.grossWeight)) {
						this.isGtn = true
						uni.showToast({
							title: '净重不能大于毛重',
							icon: 'none'
						})
					}
				} else {
					this.isGtn = false
				}
			},
			// 
			handleClick() {},
			handeleCancel(e) {
				this.show = !this.show
			},
			// 点击确定按钮
			handeleConfirm(e) {
				this.warehouseList[this.subscript].position = e.value[0].title
				this.show = !this.show
			},
			// 点击选择货位触发弹窗弹起
			handelePosition(index) {
				this.subscript = index
				this.showS = true
				this.warehouseList[this.subscript].warehouseName = this.theRight[0].name
				this.warehouseList[this.subscript].warehouseId = this.theRight[0].id
				this.model.isStorage = this.theRight[0].id //货位
			},
			// 新增货位
			handeleAdd() {
				this.warehouseList.push({
					warehouseId: '',
					warehouseName: '',
					count: ''
				})
			},
			// 选择仓库确定
			confirm(e) {
				let b = this.moneys.filter(item => item.name == e.value[0])
				this.model.warehouseId = b[0].id
				this.libraryShow = false
				let a = this.moneys.filter(item => item.name == e.value[1])
				this.warehouseList[this.subscript].warehouseName = e.value[1]
				this.warehouseList[this.subscript].warehouseId = a[0].id
			},

			// 删除货位弹窗确认
			handeleDetail(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.warehouseList.splice(index, 1)
						}
					}
				});
			},
			// 选择时间弹窗取消事件
			handeleDateCancel() {
				this.dateShow = !this.dateShow
			},
			// 选择时间弹窗确定事件
			handeleDateConfirm(e) {
				this.model.producedDate = this.formatTimestamp(e.value)
				this.model.validity = e.value + ''
				// this.model.validity = '2025-03-03'
				this.dateShow = !this.dateShow
			},
			// 点击请选择有效期触发弹窗弹起
			handeleDate() {
				// this.model.validity=Number(new Date())
				this.dateShow = !this.dateShow
			},
			// 时间戳转换
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);

				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要加1
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 使用当前时间生成批次号
			setCurrentDateTime() {
				// 获取当前日期和时间
				const now = new Date();

				// 提取各个部分
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份，确保是两位
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，确保是两位
				const hours = String(now.getHours()).padStart(2, '0'); // 获取小时，确保是两位
				const minutes = String(now.getMinutes()).padStart(2, '0'); // 获取分钟，确保是两位

				// 拼接成字符串
				return `${year}${month}${day}${hours}${minutes}`;
			}
		}
	}
</script>

<style scoped>
	.skeleton-row1 {
	  height: 70rpx;
	  background-color: #e0e0e0;
	  margin-bottom: 30rpx;
	  margin-left: 20rpx;
	}
	.skeleton-row {
	  height: 50rpx;
	  background-color: #e0e0e0;
	  margin-bottom: 30rpx;
	  margin-left: 20rpx;
	}
	.in-block-ent {
		width: 100%;
		text-align: end;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.hwqr-4 {
		width: 50%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		background-color: #177A77;
		color: #FFFFFF;
		border-radius: 70rpx;
	}

	.hwqr-3 {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hwqr-2 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.hwqr-1 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.yp-right {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.yp-right-active {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.yp-left {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #177A77;
		color: #FFFFFF;
	}

	.yp-left-active {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-Yp1 {
		width: 100%;
		height: 550rpx;
	}

	.p1A-2 {
		width: 80%;
		height: 550rpx;
		font-size: 26rpx;
	}

	.p1A-1 {
		width: 20%;
		height: 550rpx;
		/* border-right: 1rpx solid #999999; */
		background-color: #F3F8F8;
		font-size: 26rpx;
	}

	.p1A {
		width: 100%;
		height: 700rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name6 {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.submit {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/.u-form-item__body__left__content__label.data-v-5e7216f1 {
		font-size: 24rpx;
	}

	/deep/.u-form-item__body__right__message.data-v-5e7216f1 {
		text-align: right;

	}

	.delete {
		width: 60rpx;
		height: 60rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: blue;
	}

	.kg {
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		font-size: 24rpx;
	}

	.adds {
		width: 688rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77;
		font-size: 24rpx;
		/* margin-bottom: 60rpx; */
	}

	.nums {
		max-width: 345rpx;
		min-width: 300rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border: 1px solid #EBEBEB;
		padding: 0 27rpx;
		box-sizing: border-box;
		/* z-index: 2; */
	}

	.num {
		margin-left: 10rpx;
		max-width: 345rpx;
		min-width: 300rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border: 1px solid #EBEBEB;
		padding: 0 27rpx;
		box-sizing: border-box;
	}

	.storageLocations {
		width: 688rpx;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.blocks {
		width: 688rpx;
		height: 100rpx;
		/* border-bottom: 1rpx solid #EEEEEE; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.block {
		width: 688rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.content {
		width: 750rpx;
		min-height: 900rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
	}

	.foundation {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 0 0 38rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		background-color: #F8F8F8;
	}

	.container {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		background-color: #FFFFFF;
	}

	
</style>